<template>
	<view class="container">

		<view class="search-results-container">
			<form :model="form" label-width="80px">
				<view class="page-title">
					<text>{{ form.custName }}</text>
				</view>
				<view class="page-title" v-show="false">
					<text>{{ form.pkid }}</text>
				</view>
				<view>
					<uni-row>
						<uni-col :span="14">
							<view class="search-result">
								<text>收货人：</text>
							</view>
							<view class="search-result">
								<text>联系方式：</text>
							</view>
						</uni-col>
						<uni-col :span="10">
							<view label="收货人" class="search-result">
								<input type="text" v-model="form.contactsName" placeholder="请输入收货人" />
							</view>
							<view label="联系人" class="search-result">
								<input type="text" v-model="form.contactsPhone" placeholder="请输入联系方式" />
							</view>
						</uni-col>
					</uni-row>
				</view>

				<view class="search-result">
					<uni-section title="省" type="line">
						<uni-data-select v-model="form.provinceCode" :localdata="provinces"
							@change="loadCities"></uni-data-select>
					</uni-section>

					<uni-section title="市" type="line">
						<uni-data-select v-model="form.cityCode" :localdata="cities"
							@change="loadCounties"></uni-data-select>
					</uni-section>

					<uni-section title="县" type="line">
						<uni-data-select v-model="form.countyCode" :localdata="counties"
							@change="loadTowns"></uni-data-select>
					</uni-section>

					<uni-section title="镇" type="line">
						<template v-if="towns.length > 0">
							<uni-data-select v-model="form.streetCode" :localdata="towns"></uni-data-select>
						</template>
						<template v-else>
							<input type="text" v-model="form.streetName" placeholder="请输入镇"
								style="padding-left:4px; $uni-base-color;font-size: 14px;" />
						</template>
					</uni-section>
				</view>

				<text>详细地址：</text>
				<view label="详细地址" class="search-result">
					<input type="text" v-model="form.goodsAddress" placeholder="请输入详细地址" />
				</view>

				<view>
					<uni-row>
						<uni-col :span="20">
							<view>是否设置为默认地址：</view>
						</uni-col>
						<uni-col :span="4">
							<switch :checked="false" class="custom-switch" @change="switch1Change"
								style="transform:scale(0.8)" />
						</uni-col>
					</uni-row>
				</view>
			</form>
		</view>

		<view style="position: fixed; bottom: 0px; width: 100%;">
			<button @click="submitForm(from)">保存</button>
		</view>

	</view>
</template>

<script>
	import {
		listAddress,
		getAddress,
		delAddress,
		addAddress,
		updateAddress,
		getProvinces,
		getChildArea,
		listEcCust,
	} from '@/api/tms/address'

	export default {
		created() {
			this.loadProvinces();
		},
		mounted() {
			const custNo = this.$route.query.weKunnr;
			const custName = this.$route.query.weName;
			if (custName) {
				this.form.custName = custName;
				this.form.custNo = custNo;
			};

			//售达、送达方数据
			const agKunnr = this.$route.query.agKunnr;
			const agName = this.$route.query.agName;
			const weKunnr = this.$route.query.weKunnr;
			const weName = this.$route.query.weName;
			if (agKunnr) {
				this.agKunnr = agKunnr;
			}
			if (agName) {
				this.agName = agName;
			}
			if (weKunnr) {
				this.weKunnr = weKunnr;
			}
			if (weName) {
				this.weName = weName;
			}
			this.loadProvinces();
		},

		data() {
			return {
				number: "",
				addressList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 100,
					custNo: null,
					custName: null,
					custCode: null,
					contactsName: null,
					contactsPhone: null,
					provinceCode: null,
					provinceName: null,
					cityCode: null,
					cityName: null,
					countyCode: null,
					countyName: null,
					streetCode: null,
					streetName: null,
					addressCode: null,
					addressPath: null,
					goodsAddress: null,
					goodsDetailedAddress: null,
					addressIsDefault: 0,
					createUsername: null,
					createTime: null,
					updateUsername: null,
					updateTime: null,
					idValid: 0,
				},
				// 表单参数
				form: {
					custNo: null,
				},
				queryCustParams: {
					certName: null,
				},
				rules: {
					contactsName: [{
						required: true,
						message: "联系人不能为空",
						trigger: "blur"
					}],

					contactsPhone: [{
							required: true,
							message: "联系方式不能为空",
							trigger: "blur"
						},
						{
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							message: "请输入正确的手机号码",
							trigger: "blur"
						}
					],
					provinceCode: [{
						required: true,
						message: "省不能为空",
						trigger: "blur"
					}],
					cityCode: [{
						required: true,
						message: "市不能为空",
						trigger: "blur"
					}],
					countyCode: [{
						required: true,
						message: "县不能为空",
						trigger: "blur"
					}],
					streetCode: [{
						required: true,
						message: "镇不能为空",
						trigger: "blur"
					}],
					goodsAddress: [{
						required: true,
						message: "收货地址不能为空",
						trigger: "blur"
					}],
				},
				provinces: [], // 省份数据
				cities: [], // 城市数据
				counties: [], // 县区数据
				towns: [], // 镇区数据
				rules: {
					contactsName: {
						required: true,
						message: "收货人姓名不能为空"
					},
					contactsPhone: {
						required: true,
						message: "联系方式不能为空"
					},
					provinceCode: {
						required: true,
						message: "省不能为空"
					},
					cityCode: {
						required: true,
						message: "市不能为空"
					},
					countyCode: {
						required: true,
						message: "县不能许为空"
					},
					goodsAddress: {
						required: true,
						message: "详细地址不能为空"
					},
				},
			};
		},
		methods: {
			switch1Change(e) {
				const checked = e.detail.value;
				if (checked) {
					this.form.addressIsDefault = 1;
				} else {
					this.form.addressIsDefault = 0;
				}
			},
			reset() {
				this.form = {
					contactsName: null,
					contactsPhone: null,
					provinceCode: null,
					provinceName: null,
					cityCode: null,
					cityName: null,
					countyCode: null,
					countyName: null,
					streetCode: null,
					streetName: null,
					addressCode: null,
					addressPath: null,
					goodsAddress: null,
					goodsDetailedAddress: null,
					addressIsDefault: 0,
					createUsername: null,
					createTime: null,
					updateUsername: null,
					updateTime: null
				};
			},
			getAddressDetail(number) {
				getAddress(number).then(response => {
					if (response.data) {
						this.form = response.data;
					}
				});
			},
			loadProvinces() {
				getProvinces().then(response => {
					this.provinces = response.rows.map(province => ({
						value: province.areaId,
						text: province.areaName
					}));
				});
			},
			loadCities() {
				this.form.cityCode = null;
				this.form.countyCode = null;
				this.form.streetCode = null;
				if (this.form.provinceCode !== '') {
					getChildArea(this.form.provinceCode).then(response => {
						this.cities = response.rows.map(row => {
							return {
								text: row.areaName,
								value: row.areaId
							};
						});
					});
				}
			},
			loadCounties() {
				this.form.countyCode = null;
				this.form.streetCode = null;
				if (this.form.cityCode !== '') {
					getChildArea(this.form.cityCode).then(response => {
						this.counties = response.rows.map(row => {
							return {
								text: row.areaName,
								value: row.areaId
							};
						});
					});
				}
			},
			loadTowns() {
				this.form.streetCode = null;
				if (this.form.countyCode !== '') {
					getChildArea(this.form.countyCode).then(response => {
						this.towns = response.rows.map(row => {
							return {
								text: row.areaName,
								value: row.areaId
							};
						});
					});
				}
			},
			/** 验证方法*/
			validateForm() {
				for (const key in this.rules) {
					if (this.rules[key].required && !this.form[key]) {
						this.$modal.msgError(this.rules[key].message);
						return false;
					}
				}
				return true;
			},
			/** 提交按钮 */
			submitForm() {
				let flag = true;
				if (!this.validateForm()) return;

				const selectedProvince = this.provinces.find(province => province.value === this.form
					.provinceCode);
				this.form.provinceName = selectedProvince.text;

				const selectedCity = this.cities.find(city => city.value === this.form
					.cityCode);
				this.form.cityName = selectedCity.text;

				const selectedCounty = this.counties.find(county => county.value === this.form
					.countyCode);
				this.form.countyName = selectedCounty.text;

				if (this.towns && this.towns.length > 0) {
					if (this.form.streetCode) {
						const selectedStreet = this.towns.find(street => street.value === this.form
							.streetCode);
						this.form.streetName = selectedStreet.text;
					} else {
						flag = false;
						this.$modal.msgError("镇不能为空");
					}
				} else {
					if (!this.form.streetName) {
						flag = false;
						this.$modal.msgError("镇不能为空");
					}
				}
				if (this.form.goodsAddress) {
					this.form.goodsAddress = this.form.goodsAddress.trim();
				}
				if (flag) {

					if (this.form.streetCode) {
						this.form.addressPathId = this.form.provinceCode + ',' + this.form.cityCode + ',' + this
							.form.countyCode + ',' + this.form.streetCode;
					} else {
						this.form.addressPathId = this.form.provinceCode + ',' + this.form.cityCode + ',' + this.form
							.countyCode;
					}

					this.form.addressPath = this.form.provinceName + '/' + this.form.cityName + '/' + this.form
						.countyName + '/' + this.form.streetName;

					this.form.goodsDetailedAddress = this.form.provinceName + this.form.cityName + this.form
						.countyName + this.form.streetName + this.form.goodsAddress;

					this.form.isValid = 0;
					this.form.custNo = this.form.custNo;
					if (this.form.pkid != null) {
						updateAddress(this.form).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.getList();
						});
						uni.navigateTo({
							url: '/pages/ec/orderAddressDetail/index?custNo=' + this.form.custNo + '&custName=' +
								this
								.form.custName,
						});
					} else {
						addAddress(this.form).then(response => {
							this.$modal.msgSuccess("新增成功");
							this.reset();
						});
						uni.navigateTo({
							url: '/pages/ec/orderAddressDetail/index?agKunnr=' + this.agKunnr + "&agName=" + this
								.agName + "&weKunnr=" + this.weKunnr + "&weName=" + this.weName,
						});
					}
				}


			},
		},
	};
</script>

<style>
	.container {
		dispaly: flex;
		flex-direction: row;
		flex: auto;
		background-color: #fff
	}

	.page-title {
		background: #3e7baf;
		color: #fff;
		text-align: center;
		font-size: 1.3rem;
		font-weight: "300";
	}

	.search-results-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 200%;
		/* 设置高度为内容的高度的两倍 */
		padding: 3px;
		/* 设置内边距 */
		background-color: #fff;
		/* 设置背景色 */
		font-size: 18px;
		padding-bottom: 80px;
	}

	.search-result {
		flex: 1;
		/* 使每个内部元素均等分布 */
		margin-bottom: 10px;
		/* 设置底部边距 */
		background-color: #fff;
		padding: 7px;
		/* 设置内边距 */
	}

	.custom-switch.on {
		background-color: blue;
		/* 设置按钮的宽度 */
		width: 100px;
		/* 根据需要调整 */
		/* 设置按钮的高度 */
		height: 50px;
		/* 根据需要调整 */
	}
</style>